<template>
  <!-- 门店实时交易轮播 -->
  <div class="ScrollChartContent">
    <div class="ScrollChartcont">
      <div class="msgtitle backgroundimg">
        <span class="msgSpanTitle">用户</span>
        <span class="msgSpanTitle">时间</span>
        <span class="msgSpanTitle">金额</span>
      </div>
      <div class="msgScroll">
        <vueSeamlessScroll
          ref="msgListRefs"
          :data="cashierOrderList"
          :class-option="classOption"
        >
          <div
            v-for="(item, index) in cashierOrderList"
            :key="item.id"
            class="msgScrollItem backgroundimg"
          >
            <span class="msgSpanItem">{{ item.name }}</span>
            <span class="msgSpanItem">{{ item.time }}</span>
            <span class="msgSpanItem">{{ item.money }}</span>
          </div>
        </vueSeamlessScroll>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "ScrollChart",
  components: {
    vueSeamlessScroll,
  },
  props: {
    cashierOrderList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      msgList: [
        {
          storeName: "裕酷",
          user: "6057",
          time: "12-26-12:00",
          money: "156.65",
        },
        {
          storeName: "裕酷",
          user: "6057",
          time: "12-26-12:00",
          money: "156.65",
        },
        {
          storeName: "裕酷",
          user: "6057",
          time: "12-26-12:00",
          money: "156.65",
        },
        {
          storeName: "裕酷",
          user: "6057",
          time: "12-26-12:00",
          money: "156.65",
        },
        {
          storeName: "裕酷",
          user: "6057",
          time: "12-26-12:00",
          money: "156.65",
        },
        {
          storeName: "裕酷",
          user: "6057",
          time: "12-26-12:00",
          money: "156.65",
        },
        {
          storeName: "裕酷",
          user: "6057",
          time: "12-26-12:00",
          money: "156.65",
        },
        {
          storeName: "裕酷",
          user: "6057",
          time: "12-26-12:00",
          money: "156.65",
        },
        {
          storeName: "裕酷",
          user: "6057",
          time: "12-26-12:00",
          money: "156.65",
        },
        {
          storeName: "裕酷",
          user: "6057",
          time: "12-26-12:00",
          money: "156.65",
        },
      ],
      classOption: {
        step: 0.5,
        limitMoveNum: 8,
        openWatch: true,
      },
    };
  },
  created() {
    console.log(this.cashierOrderList, "cashierOrderList");
  },
  methods: {
    reset() {
      this.$refs.msgListRefs.reset();
      console.log("reset了");
    },
  },
};
</script>

<style scoped lang="scss">
.ScrollChartContent {
  .ScrollChartcont {
    margin: 0 0.1563rem;
    overflow: hidden;
    /* height: 2.4531rem; */
    width: 2.6458rem;

    .msgtitle {
      width: 2.6458rem;
      height: 0.2865rem;
      background-image: url(../../assets/imgs/Rectangle.png);
      line-height: 0.2865rem;
      display: flex;
      .msgSpanTitle {
        width: 33%;
        font-family: PingFang SC, PingFang SC;
        font-size: .0938rem;
        text-align: center;
        font-weight: 550;
        color: #ffffff;
      }
    }
    .msgScroll {
      height:2.3438rem;
      width: 2.6458rem;
      overflow: hidden;
      .msgScrollItem {
        height: 0.25rem;
        display: flex;
        background-image: url(../../assets/imgs/itemBgImg.png);
        .msgSpanItem {
          width: 33%;
          text-align: center;
          line-height: 0.2552rem;
          font-size: 0.0833rem;
          font-family: PingFang SC, PingFang SC;
          /* font-weight: bold; */
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
}
.backgroundimg {
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
}
</style>
